<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>流程图</title>
<script src="js/DD_belatedPNG_0.0.8a.js" type="text/javascript"></script>
<script type="text/javascript">
        DD_belatedPNG.fix('img,a,div,input');
</script>
<style>
body,td,th {
	font-family: "宋体";
	font-size: 12px;
}
.divhed{width: 195px;display: block;word-break:keep-all;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;}
</style>
</head>
<body>
<table style="border: 1px solid;" align="center" width="95%" border="0" cellspacing="1" cellpadding="0" bgcolor="#999999" >
		<c:forEach items="${processList}"  var="his">
		<c:if test="${his.status!='未处理'}">
		<tr>
		<td style="background: #ffffff" width="15%">${his.executor}</td>
		<td style="background:#ffffff" width="15%">交下一步</td>
		<td style="background:#ffffff" >${his.userName}</td>
		<td style="background:#ffffff" width="20%"> <fmt:formatDate value="${his.createTime}" type="both"/></td>
		</tr>
		</c:if>
		</c:forEach>
	</table>
<table align="center">
	<tr>
    	<td>
    		<c:forEach items="${processList}" var="process">
	        	<c:if test="${process.nodeName=='开始'}">
		        	<div align="center">
		            	<img src="image/Add.png" width="48" height="48"/><br />${process.executor}<br />${process.nodeName }
		            </div>
	            </c:if>
		        <c:if test="${process.nodeName!='开始' && process.nodeId!='0'}">
	            	<table align="center" width= "1 "   border= "0 "   cellspacing= "0 "   cellpadding= "0 "   height= "50 "> 
	                <tr> 
	                    <td width= "1 "   bgcolor= "#666666 "> </td> 
	                </tr> 
				</table>
	            <table align="center">
	            	<tr>
	                	<td>∨</td>
	                </tr>
	            </table>
	            <div align="center">
            	<img src="image/Profile.png" width="48" height="48"/><br />
            	<div title="${process.executor}" class='divhed'>
            		${process.executor}
            	</div>${process.nodeName}
            	</div>
	            </c:if>
	             <c:if test="${process.nodeId=='0'}">
					<table align="center" width="1 " border="0 " cellspacing="0 "
						cellpadding="0 " height="50 ">
						<tr>
							<td width="1 " bgcolor="#666666 ">
							</td>
						</tr>
					</table>
					<table align="center">
						<tr>
							<td>
								∨
							</td>
						</tr>
					</table>
					<div align="center">
						<img src="image/Profile.png" width="48" height="48" /><br />
						<div title="${process.executor}" class='divhed'>
            			${process.executor}
           				 </div>
						${process.nodeName}
					<table align="center" width="1 " border="0 " cellspacing="0 "
						cellpadding="0 " height="50 ">
						<tr>
							<td width="1 " bgcolor="#666666 ">
							</td>
						</tr>
					</table>
					<table align="center">
						<tr>
							<td>
								∨
							</td>
						</tr>
					</table>
					<div align="center">
						<img src="image/Delete.png" width="48" height="48" /><br />
						<div title="${process.userName}" class='divhed'>
            			${process.executor}
           				 </div>
						${process.endNodeName}
					</div>
					</div>
				</c:if>
            </c:forEach>
        </td>
    </tr>
</table>
</body>
</html>